<template>
  <div class="uploadImg">
      <div class="fileTitle">
        <span>转让协议：</span>
        <span class="sub" @click="uploadHandle"><i class="el-icon-upload" style="margin-right:2px;"></i>选择上传文件</span>
        <span class="tishi">支持扩展名：.doc .docx .pdf</span>
        <ul v-for="(item,index) in fileList" :key="index" style="font-size:12px; margin-left:45px">
          <li>{{item.name}}
            <!-- <i class="el-icon-delete" @click="deleteImg(index)"></i> -->
          </li>
        </ul>
      </div>
      <el-progress  :percentage="percentage" class="progress" status="success" v-show="percentShow"></el-progress>
      <input type="file" ref="inputfile" @change="fileChangeHandle" style="display: none;">
  </div>
</template>

<script>
  import * as qiniu from 'qiniu-js'
  import api from '@/api/apiPath'
  import Util from '../../../../common/utils'
  export default {
    name: "upload-img",
    data () {
      return {
        percentage: 0,
        percentShow: false,
        token: '',
        qiniuUrl: '',
        imgUrl: '',
        fileList: [],
        fileUrl: [],
      }
    },
    props: ['value'],
    created () {
      this.axios.post(api.UPLOADTOKEN, {}).then(res => {
        this.token = res.data.data.imgToken
        this.qiniuUrl = res.data.data.qiniuUrl
      })
    },
    watch: {
      value (val) {
        this.imgUrl = val
      }
    },
    methods: {
      uploadHandle () {
        console.log(this.fileList)
        console.log(this.$refs.inputfile)
        if(this.fileList.length){
          return this.$message('只能上传一份文件')
        }
        const node = this.$refs.inputfile
        node.click()
      },
      fileChangeHandle () {
        this.fileList = []
        const file = this.$refs.inputfile.files[0]
        // 判断文件类型
        const upType = ['pdf', 'doc','docx']
        const fileName = file.name
        const postfix = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length)
        const fileSize = file.size;
        // if(fileSize > 1048576) {
        //   return this.$message({
        //     message: '文件大小应小于1M',
        //     type: 'warning'
        //   })
        // }
        if (upType.indexOf(postfix) === -1) {
          return this.$message({
            message: '只支持pdf,word格式的文件',
            type: 'warning'
          })
        }
        this.fileList.push(file);
        this.uploadQiniu()
      },
      delFile(){
        this.deleteImg(0)
      },
      deleteImg(index) {
        // this.fileList.splice(index,1);
        // this.fileUrl.splice(index,1);
        this.fileList = []
        this.fileUrl = []
        
        this.$refs.inputfile.value = ''
      },
      // 用七牛上传
      uploadQiniu () {
        for(const item of this.fileList) {
          const fileName = item.name
          const nameText = fileName.substring(0,fileName.lastIndexOf('.'))
          const postfix = fileName.substring(fileName.lastIndexOf('.'), fileName.length)
          const name = Util.getTimeString2(new Date().getTime()) + Math.ceil(Math.random()*100)
          const token = this.token
          const putExtra = {
            fname: fileName,
            params: {},
            mimeType: null
          }
          const config = {
           useCdnDomain: true
          }
          const observable = qiniu.upload(item, nameText + name + postfix, token, putExtra, config)
          const vueThis = this
          this.percentShow = true
          this.percentage = 10
          observable.subscribe(function (res) {
            vueThis.percentage = res.total.percent
          },function (error) {
          // console.error('图片上传失败：', error)
          }, function (res) {
            vueThis.$message({
              message: '上传成功',
              type: 'success'
            })
            vueThis.percentShow = false
            vueThis.imgUrl = vueThis.qiniuUrl + res.key
            vueThis.fileUrl.push(vueThis.imgUrl);
          })
        }
        this.$emit('uploadSuccess',this.fileUrl,this.fileList[0]);
    }
  }
}
</script>

<style lang="stylus">
  .uploadImg 
  .type
    width :500px
    .upload
      margin 15px 0
    .fileTitle
      span 
        font-size :15px
      .sub 
        padding: 2px 10px
        font-size 12px
        display inline-block
        text-align center
        margin-left 5px
        cursor pointer
        border: 1px solid #ccc
        
    ul li 
      list-style none
      .el-icon-delete 
          margin-left 10px
          cursor pointer

    .tishi
      color :rgba(0,0,0,0.5)
      font-size 12px!important
  
</style>
